<template>
    <div>
          <Loading v-if="loadingShow" />
        <!-- 首页图片轮播图 -->
        <van-swipe :autoplay="1850" indicator-color="orange" v-if="gallery">
            <van-swipe-item v-for="item in gallery" :key="item.id">
                <img :src="item.img_url" class="swipeImg" />
            </van-swipe-item>
        </van-swipe>
        <ProductionTip />
        <!-- 商品描述 -->
        <ul class="detail" v-show="info">
            <li>{{ info.name }}</li>
            <li>{{ info.goods_brief }}</li>
            <li>￥ {{ info.retail_price | price }} 元</li>
        </ul>
        <!-- 商品参数 -->
        <div class="reference" v-show="attribute.length">
            <h2>商品参数</h2>
            <ul>
                <li v-for="(item, index) in attribute" :key="index">
                    <div class="firstDiv">{{ item.name }}</div>
                    <div class="lastDiv">{{ item.value }}</div>
                </li>
            </ul>
        </div>
        <!-- 图片 -->
        <div v-html="info.goods_desc" class="goodImg" v-show="info.goods_desc"></div>
        <!-- 常见问题 -->
        <ul class="problem">
            <li v-for="item in issue" :key="item.id">
                <h3>{{ item.question }}</h3>
                <p>{{ item.answer }}</p>
            </li>
        </ul>
        <!-- 相关产品 -->
        <div class="newGoodsList">
            <p
                style="
                    text-align: center;
                    font-weight: 500;
                    font-size: 20px;
                    color: black;
                    padding-top: 15px;
                "
            >
                相关产品
            </p>
            <div class="provideContainer" v-show="goodList">
                <div
                    v-for="item in goodList"
                    :key="item.id"
                    class="positionBox"
                    @click="againProduction(item.id)"
                >
                    <van-image width="172" height="174" lazy-load :src="item.list_pic_url">
                        <template v-slot:loading>
                            <van-loading type="spinner" size="20" />
                        </template>
                    </van-image>
                    <div class="center">
                        <p>{{ item.name }}</p>
                        <p style="color: #98004d; text-align: center">
                            ￥ {{ item.retail_price | price }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 撑高盒子 无意义 -->
        <div class="test"></div>
        <AppGoodActive :id="id" />
    </div>
</template>

<script>
import ProductionTip from '../component/ProductionTup.vue'
import AppGoodActive from '../component/AppGoodActive.vue'
import Loading from '../component/Loading.vue'
export default {
    name: 'SearchDetails',
    data() {
        return {
            gallery: [],
            info: {},
            attribute: [],
            issue: [],
            goodList: [],
            id: window.sessionStorage.getItem('productionId'),
            badge: 0,
            loadingShow:true
        }
    },
    beforeCreate() {
        if (this.$route.params.id) {
            window.sessionStorage.setItem('productionId', this.$route.params.id)
        }
    },
    created() {
        // 获取产品的详细信息
        this.getData()
        //获取相关产品
        this.$http
            .get('/goods/related', {
                params: {
                    id: this.id
                }
            })
            .then(res => {
                if (res.data.errno != 0) {
                    this.$dialog.alert({
                        message: res.data.errmsg
                    })
                    return
                }
                this.goodList = res.data.data.goodsList
                console.log('goodList', this.goodList)
                this.loadingShow = false
            })
            .catch(err => {
                console.log(err)
            })
    },
    components: {
        ProductionTip,
        AppGoodActive,
        Loading
    },
    methods: {
        // 点击商品
        againProduction(v) {
            window.sessionStorage.setItem('productionId', v)
            this.getData()
            setTimeout(() => {
                this.$router.go(0)
            }, 100)
        },
        // 获取产品的详细信息
        getData() {
            this.$http
                .get('/goods/detail', {
                    params: {
                        id: this.id
                    }
                })
                .then(res => {
                    if (res.data.errno != 0) {
                        this.$dialog.alert({
                            message: res.data.errmsg
                        })
                        return
                    }
                    const { gallery, info, attribute, issue ,productList} = res.data.data
                    this.gallery = gallery
                    this.info = info
                    this.attribute = attribute
                    this.issue = issue
                    this.$bus.$emit('AppGoodInfo', {
                        info,
                        productListId:productList[0].id
                    })
                })
                .catch(err => {
                    console.log(err)
                })
        }
    }
}
</script>

<style scoped>
.swipeImg {
    width: 100%;
}
.detail {
    color: black;
    text-align: center;
    background-color: #fff;
    margin-bottom: 3px;
}
.detail li:first-child {
    font-size: 20px;
    padding: 15px 0;
}
.detail li:nth-child(2) {
    font-size: 14px;
    padding: 0 0 15px 0;
    font-weight: 300;
}
.detail li:nth-child(3) {
    font-size: 14px;
    color: darkred;
}
.reference {
    background-color: #fff;
    font-size: 14px;
    margin-top: 16px 0;
    padding-bottom: 2px;
}
.reference li {
    background-color: #efefef;
    height: 36px;
    margin: 6px 12px;
    border-radius: 6px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
.lastDiv {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: black;
}
.firstDiv {
    white-space: nowrap;
    color: #999;
    text-indent: 1rem;
    margin-right: 12px;
}
h2 {
    font-size: 20px;
    line-height: 40px;
    color: black;
    font-weight: 400;
    margin-left: 15px;
}
.goodImg {
    margin-top: 10px;
}
.goodImg /deep/img {
    width: 100%;
    display: block;
}
.problem {
    background-color: #fff;
}
.problem li h3 {
    font-size: 18px;

    color: black;
    font-weight: 400;
    padding: 6px;
}
.problem li p {
    font-size: 14px;
    padding-left: 20px;
    margin: 10px 0;
}
.newGoodsList {
    background-color: #fff;
    margin-top: 20px;
}
.newGoodsList .van-swipe-item {
    margin-right: 9px;
    padding: 10px 0;
    background-color: #fff;
}
.newGoodsList .van-swipe {
    overflow: hidden;
}
.provideContainer {
    padding-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    font-size: 14px;
}
.positionBox {
    position: relative;
    margin-top: 1px;
}
.test {
    width: 100%;
    height: 60px;
}
</style>